<%-- 
    Document   : statistieken
    Created on : 16-aug-2013, 15:07:34
    Author     : Logic
--%>

<%@page import="java.util.ArrayList"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <%int aantalAlumni = Integer.parseInt(request.getAttribute("aantalAlumni").toString());
        int werkendeAlumni = Integer.parseInt(request.getAttribute("werkendeAlumni").toString());
        int werklozeAlumni = Integer.parseInt(request.getAttribute("werklozeAlumni").toString());
        int applicatieAlumni = Integer.parseInt(request.getAttribute("applicatieAlumni").toString());
        int businessAlumni = Integer.parseInt(request.getAttribute("businessAlumni").toString());
        int netwerkAlumni = Integer.parseInt(request.getAttribute("netwerkAlumni").toString());
        ArrayList<String> top3bedrijven = (ArrayList<String>) request.getAttribute("top3bedrijven");
    %>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Statistieken</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
        
        <script src="Chart.js"></script>
        <script type="text/javascript">
            function init() {
                var alumnistatistiek = document.getElementById("alumni").getContext("2d");
                var richtingstatistiek = document.getElementById("richtingen").getContext("2d");

                var data = [
                    {
                        value: <%=werkendeAlumni%>,
                        color: "#F38630",
                        label: "Werkend"
                    },
                    {
                        value: <%=werklozeAlumni%>,
                        color: "#E0E4CC",
                        label: "Geen werk"
                    }

                ]
                var data2 = [
                    {
                        value: <%=applicatieAlumni%>,
                        color: "#E01B3F",
                        label: "Applicatie ontwikkeling"
                    },
                    {
                        value: <%=businessAlumni%>,
                        color: "#7A8AFF",
                        label: "Business management"
                    },
                    {
                        value: <%=netwerkAlumni%>,
                        color: "#49F276",
                        label: "Netwerkbeheer"
                    }

                ]
                var myNewChart = new Chart(alumnistatistiek).Pie(data);
                var myNewChart2 = new Chart(richtingstatistiek).Pie(data2);
            }
        </script>

    </head>
    <body onload="init()">
        <h1><a href="index.jsp">Alumni</a></h1>
        <h1>Statistieken</h1>
        <h3>Statistiek werkende alumni </h3>
        <p>Totaal aantal alumni: <%=aantalAlumni%></p>
        <canvas id="alumni" width="300" height="300"></canvas>
        <h3>Top 3 bedrijven met meeste alumni werknemers</h3>
        <ul>
            <% for (String i : top3bedrijven) {%>
            <li><%=i%></li>
                <%}%>
        </ul>
        <h3>Statistiek alumni per richting</h3>
        <canvas id="richtingen" width="400" height="400"></canvas>
    </body>
</html>
